<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 100%;
        text-align: center;
        font-size: 24px;
    }
    .login{
        width: 512px;
        height: 300px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        box-shadow: 0px 0px 20px #dddddd;
        display: none;
    }
    button{
        width: 50px;
        height: 30px;
        background: none;
        border: 1px solid #dddddd;
    }
</style>
<body>
<div class="box">
    点击登录
</div>
<div class="login">
    <button>关闭</button>
    <div class="title">
        登录
    </div>
</div>
<script>
    var login = document.querySelector('.login');
    var box = document.querySelector('.box');
    var btn = document.querySelector('button');
    var title = document.querySelector('.title');
    box.addEventListener('click',function () {
        login.style.display = 'block';
    });
    btn.addEventListener('click',function () {
        login.style.display = 'none';
    });
    title.addEventListener('mousedown',function (e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        document.addEventListener('mousemove',fun);
        function fun (e) {
            login.style.left = e.pageX - x +'px';
            login.style.top = e.pageY - y +'px';
        }
        document.addEventListener('mouseup',function () {
            document.removeEventListener('mousemove',fun);
        })
    })
</script>
</body>
</html>